<template>
	<view class="mainCon">
		<view class="headForm">
			<u-form :model="formData" ref="uForm" label-width="160">
				<u-form-item label="箱号">
					<u-input v-model="formData.CNTR" placeholder="请输入箱号"/>
				</u-form-item>
				
				<u-form-item label="开始时间">
					<u-button :custom-style="customStyle" @click="showBegin = true">{{ formData.beginDate }}</u-button>
				</u-form-item>
				
				<u-form-item label="结束时间">
					<u-button :custom-style="customStyle" @click="showEnd = true">{{ formData.endDate }}</u-button>
				</u-form-item>
			</u-form>

			<view class="btnGroup">
				<u-button :custom-style="customStyle" type="primary" @click="onSearch">查询</u-button>
			</view>
		</view>
		<view style="height: 350rpx;">

		</view>
		<view class="empty" style="margin-top: 55rpx;" v-if="list.length==0">
			<u-empty text="暂无相关数据" mode="list"></u-empty>
		</view>
		<view class="orderList">
			<view class="orderItem" v-for="(item, index) in list" :key="index">
				<view class="orderInfo" >
					<view>
						<view class="infoCell">
							<view class="labelName">
								空重箱：
							</view>
							<view class="infoCon" v-if="item.e_F_ID === 'E'">
								空箱
							</view>
							<view class="infoCon" v-if="item.e_F_ID === 'F'">
								重箱
							</view>
						</view>
						<view class="infoCell">
							<view class="labelName">
								提单号：
							</view>
							<view class="infoCon">
								{{item.bill_NO === null ? '空' : item.bill_NO}}
							</view>
						</view>

						<view class="infoCell">
							<view class="labelName">
								箱尺/箱型：
							</view>
							<view class="infoCon">
								{{item.cntr_SIZ_COD}}/{{item.cntr_TYP_COD}}
							</view>
						</view>
									
						<view class="infoCell">
							<view class="labelName">
								箱公司：
							</view>
							<view class="infoCon">
								{{item.cntr_CORP_COD}}
							</view>
						</view>
						
						<view class="infoCell">
							<view class="labelName">
								箱号：
							</view>
							<view class="infoCon">
								{{item.cntr}}
							</view>
						</view>
						
						<view class="infoCell">
							<view class="labelName">
								船名：
							</view>
							<view class="infoCon">
								{{item.ship_NAM}}
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<u-calendar v-model="showBegin" :mode="mode" @change="changeBegin"></u-calendar>
		<u-calendar v-model="showEnd" :mode="mode" @change="changeEnd"></u-calendar>
	</view>
</template>

<script>
import { data } from 'uview-ui/libs/mixin/mixin';
	export default {
		data() {
			return {
				customStyle: {
					height: '60rpx',
				},
				formData: {
					CNTR: '',
					beginDate: '2023-05-01',
					endDate: '2023-05-05',
					rows: []
				},
				list: [],
				flag: false,
				showBegin: false,
				showEnd: false,
				mode: 'date',
				baseUrl: 'http://localhost:9051'
			};
		},
		onLoad() {
		this.getList()
		},
		methods: {
			getList() {
				uni.showLoading({
					title: '加载中...'
				})
				let param = {
					pageNum: 1,
					pageSize: 20,
					R1: 2,
					CNTR: this.formData.CNTR,
					opercod: '',
					BEGINDATE: this.formData.beginDate,
					ENDDATE: this.formData.endDate
				}
				uni.request({
					url: 'https://api.zlkj-port.com/szgjptapi/zlkj/handlingbill/getInoutcyData',
					method: "post",
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					data: param,
					success: (res) => {
						this.list = res.data.rows
						uni.hideLoading()
					}
				});
			},
			onSearch() {
				this.getList()
			},
			changeBegin(e) {
				this.formData.beginDate = e.result
				console.log(e)
			},
			changeEnd(e) {
				this.formData.endDate = e.result
				console.log(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-form-item {
		padding: 6rpx !important;
	}

	page {
		background-color: #F2F1F9;
	}

	.headForm {
		padding: 20rpx;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 10;
		background-color: #FFFFFF;

		.btnGroup {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 15rpx;
		}
	}

	.listCon {

		.listItem {
			margin-left: 10px;
			padding: 20rpx;
			border-bottom: 1px solid $u-border-color;
			display: flex;
			align-items: center;



			.infoCon {

				display: flex;
				align-items: center;
				justify-content: space-between;

				.cellItem {
					display: flex;
					align-items: center;
					font-size: 28rpx;

					.label {}
				}

				.labelTag {
					background-color: #E0EDFB;
					color: #4C86E7;
					line-height: 50rpx;
					border-radius: 25rpx;
					font-size: 26rpx;
					text-align: center;
					padding-right: 15rpx;
					padding-left: 15rpx;
				}

				.labelTagpay {
					background-color: #85da96;
					color: #3757e7;
					line-height: 50rpx;
					border-radius: 25rpx;
					font-size: 26rpx;
					text-align: center;
					padding-right: 15rpx;
					padding-left: 15rpx;
				}

				.labelTagnopay {
					background-color: #ff7563;
					color: #ffffff;
					line-height: 50rpx;
					border-radius: 25rpx;
					font-size: 26rpx;
					text-align: center;
					padding-right: 15rpx;
					padding-left: 15rpx;
				}

				.checkBox {}
			}
		}
	}
	
	.orderList {
		width: 700rpx;
		margin: 20rpx auto;
		.orderItem {
			// #FFFFFF
			background-color: rgba(214, 214, 214, 0.4);
			padding: 20rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
	
			.orderHead {
				.headcell {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 10rpx;
	
					.leftCon {
						display: flex;
						align-items: center;
	
						.labelTag {
							background-color: #E0EDFB;
							color: #4C86E7;
							width: 180rpx;
							line-height: 50rpx;
							border-radius: 25rpx;
							font-size: 26rpx;
							text-align: center;
							margin-right: 15rpx;
						}
					}
	
					.status1 {
						color: #4C86E7;
						font-size: 26rpx;
					}
	
					.dateLabel {
						color: #4b4c4d;
					}
	
					.status2 {
						color: #E94340;
						font-size: 30rpx;
					}
				}
			}
	
			.orderInfo {
				margin-top: 20rpx;
				// border-top: 1rpx dashed #C1C3C2;
				// padding-top: 20rpx;
	
				.infoCell {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
	
					.labelTag {
						background-color: #E0EDFB;
						color: #4C86E7;
						width: 150rpx;
						line-height: 50rpx;
						border-radius: 25rpx;
						font-size: 26rpx;
						text-align: center;
						margin-right: 15rpx;
					}
	
					.labelName {
						color: #4b4c4d;
						font-size: 28rpx;
						margin-right: 15rpx;
						width: 175rpx;
					}
	
					.infoCon {
						color: #4b4c4d;
					}
				}
			}
		}
	}
</style>
